<template>
	<div class="">
		<sports-match-list
			class="mt-2"
			:has-sports-toggle="false"
			:sport-id="sportId"
			:leagueId="leagueId"
			subscribe-type="league">
			<template #title>
				<sports-league-titles :league-data="leagueData" :index="0"></sports-league-titles>
			</template>
		</sports-match-list>
		<sports-league-titles class="my-2" :league-data="leagueData" :index="1"></sports-league-titles>
		<sports-champion-list :leagueId="leagueId"></sports-champion-list>
	</div>
</template>

<script lang="ts" setup>
import SportsLeagueTitles from './sports-league-titles.vue'
import { SportsMatchList, SportsChampionList } from '@/components/sports'
import { useRoute } from 'vue-router'
import { computed, ref, watch, inject, Ref } from 'vue'
import { getLeagueData } from '@/api/betting'
import { LeagueType } from '@/types'
import { useAppStore } from '@/store'
import { SportsType } from '@/enums'

const sportId = inject<Ref<SportsType | undefined>>('sportId')

const appStore = useAppStore()

const route = useRoute()

const leagueId = computed(() => route.params.leagueId as string)

const leagueData = ref<LeagueType | undefined>()

const getLeagueInfo = async () => {
	try {
		const { data } = await getLeagueData({
			locale: appStore.lang,
			oddsStyle: appStore.odds,
			leagueIDs: leagueId.value
		})
		leagueData.value = data.list[0]
	} catch (error) {}
}

watch(
	() => [leagueId.value, appStore.lang, appStore.odds],
	() => {
		getLeagueInfo()
	},
	{ immediate: true }
)
</script>
